<template>
  <div class="distributor">
    <!--用户详细账变-->
    <div class="AccountChangeList" v-if="dashix">
      <div class="list">
        <p>用户{{agentReportUsername}}账变信息 <span @click="AccountChangeList('close','')">关闭</span></p>
        <div class="accountInput displayFlex listKey">
          <section class="myDatePickerBox displayFlex ">
            <div class="datePickerItem">
              <DatePicker v-model="startTime" type="date" @on-change="changeStartTime" placeholder="请选择..."
                          style="width: 200px"></DatePicker>
            </div>
            <p class="propInfo">至</p>
            <div class="datePickerItem">
              <DatePicker v-model="endTime" type="date" @on-change="changeEndTime" placement="bottom-end"
                          placeholder="请选择..." style="width: 200px"></DatePicker>
            </div>
          </section>
          <div class="accountType displayFlex">
            <p class="accountTypeTitle">账变类型</p>
            <Select v-model="accountFirstType" class='allLottery' style="width:110px; margin-right: 10px;">
              <Option :value="'-1'">全部</Option>
              <Option v-for="(accountTypeItem,accTypeIndex) in accountTypeData" :value="accountTypeItem.id" :key="accTypeIndex">
                {{accountTypeItem.name}}
              </Option>
            </Select>
            <Select v-model="accountSecondType" class='allLottery' style="width:110px;margin-right: 5px;"
                    :label-in-value="selectFlag">
              <Option :value="'-1'">全部</Option>
              <Option v-for="(secondTypeItem,secTypeIndex) in accountSecondTypeData" :value="secondTypeItem.id"
                      :key="secTypeIndex">{{secondTypeItem.name}}
              </Option>
            </Select>
          </div>
          <section class="accountBtnCx">
            <p @click="queryAccountInfo">查询</p>
          </section>
        </div>
        <ul class="accountTab accountTabTitle">
          <li class="displayFlex">
            <p>订单号</p>
            <p>类型</p>
            <p>收入</p>
            <p>支出</p>
            <p>余额</p>
            <p>彩种</p>
            <p>玩法</p>
            <p>期号</p>
            <p>创建时间</p>
            <p>备注</p>
          </li>
        </ul>
        <ul class="accountTab accountTabContent scrollBar">
          <li class="displayFlex" v-for="(agentAccountItem,agentAccountIndex) in agentAccountData.result">
            <p class="one-txt-cut" :title="agentAccountItem.relationOrderId">{{agentAccountItem.relationOrderId}}</p>
            <p>{{checkAccountType(agentAccountItem.type,agentAccountItem.subType)}}</p>
            <p>
              {{checkIncomeExpenses(agentAccountItem.type,agentAccountItem.subType)=='in'?agentAccountItem.cash:'0'}}</p>
            <p>
              {{checkIncomeExpenses(agentAccountItem.type,agentAccountItem.subType)=='out'?agentAccountItem.cash:'0'}}</p>
            <p>{{agentAccountItem.amount}}</p>
            <p>{{agentAccountItem.lotteryName}}</p>
            <p>{{agentAccountItem.playedGroupName}}-{{agentAccountItem.playedName}}</p>
            <p>{{agentAccountItem.actionNo}}</p>
            <p :title="_Util.formatDateTime(agentAccountItem.createTime,1)">
              {{_Util.formatDateTime(agentAccountItem.createTime,1)}}</p>
            <p>{{agentAccountItem.note}}</p>
          </li>
        </ul>
        <div class="pageDevice">
          <Page :total="totalPage" :pageSize='perPageNum' :current="currentPage" :showTotal='true'
                @on-change="changeCurrentPage"></Page>
        </div>
      </div>
    </div>
    <div class="distributorTitle clearFiex">
      <div class="distributorTitleL">代理报表</div>
      <div class="accountInput displayFlex distributorTitleR">
        <section class="myDatePickerBox displayFlex ">
          <input type="text" v-model="agentUsername" placeholder="请输入用户名">
          <div class="datePickerItem">
            <DatePicker v-model="agentStartTime" type="date" @on-change="changeAgentStartTime" placeholder="请选择..."
                        style="width: 200px"></DatePicker>
          </div>
          <div class="datePickerItem">
            <DatePicker v-model="agentEndTime" type="date" @on-change="changeAgentEndTime" placement="bottom-end"
                        placeholder="请选择..." style="width: 200px"></DatePicker>
          </div>
        </section>
        <section class="accountBtnCx">
          <p @click="queryAgentRport">查询</p>
        </section>
      </div>
    </div>
    <div class="distributorTab">
      <div class="firstLi displayFlex">
        <p>用户名</p>
        <p>类型</p>
        <p>下级</p>
        <p>
          <span>彩票</span>
          <span>
            <b>有效投注</b>
            <b>中奖金额</b>
            <b>彩票返水</b>
          </span>
        </p>
        <p>
          <span>存款</span>
          <span>
            <b>总存款</b>
            <b>入款优惠</b>
            <b>活动优惠</b>
          </span>
        </p>
        <p>
          <span>取款</span>
          <span class="clearFiex">
            <b>总取款</b>
            <b>优惠扣除</b>
            <b>其他扣除</b>
          </span>
        </p>
        <p>团队盈亏</p>
      </div>
      <ul class="scrollBar">
        <li class="displayFlex" v-for="(agentReportItem,agentReportIndex) in agentReportData.result">
          <p @click="AccountChangeList(agentReportItem.uid,agentReportItem.username)">{{agentReportItem.username}}</p>
          <p>{{userSelfId==agentReportItem.uid?'-':agentReportItem.type=='0'?'会员':'代理'}}</p>
          <p @click="querySubAgent(agentReportItem.uid)">
            {{userSelfId==agentReportItem.uid?'-':agentReportItem.totalSub}}</p>
          <p class="clearFiex">
            <span>{{agentReportItem.totalBetAmount}}</span>
            <span>{{agentReportItem.totalWinAmount}}</span>
            <span>{{agentReportItem.totalRebateAmount}}</span>
          </p>
          <p class="clearFiex">
            <span>{{agentReportItem.totalRechargeAmount}}</span>
            <span>{{agentReportItem.totalIncomeGiftAmount}}</span>
            <span>{{agentReportItem.totalActiveGiftAmount}}</span>
          </p>
          <p class="clearFiex">
            <span>{{agentReportItem.totalWithdrawAmount}}</span>
            <span>{{agentReportItem.totalActiveWithdrawAmount}}</span>
            <span>{{agentReportItem.totalOtherWithdrawAmount}}</span>
          </p>
          <p>{{agentReportItem.totalTeamProfit}}</p>
        </li>
      </ul>
      <ul class="clearFiex">
        <li class="displayFlex">
          <p>总计</p>
          <p>-</p>
          <p>{{agentReportStatData.data1}}</p>
          <p class="clearFiex">
            <span>{{agentReportStatData.data2}}</span>
            <span>{{agentReportStatData.data3}}</span>
            <span>{{agentReportStatData.data4}}</span>
          </p>
          <p class="clearFiex">
            <span>{{agentReportStatData.data5}}</span>
            <span>{{agentReportStatData.data6}}</span>
            <span>{{agentReportStatData.data7}}</span>
          </p>
          <p class="clearFiex">
            <span>{{agentReportStatData.data8}}</span>
            <span>{{agentReportStatData.data9}}</span>
            <span>{{agentReportStatData.data10}}</span>
          </p>
          <p>{{agentReportStatData.data11}}</p>
        </li>
      </ul>
    </div>
    <div class="pageDevice">
      <Page :total="reportTotalPage" :pageSize='reportPerPageNum' :current="reportCurrentPage" :showTotal='true'
            @on-change="changeReportCurrentPage"></Page>
    </div>
    <p class="declare"><i></i><b>盈利公式 = 有效投注 - 中奖金额 - 入款优惠 - 活动优惠 - 彩票返水 + 优惠扣除 + 其他扣除</b></p>
    <p class="declares">您好 {{username}}，目前您已经发展 <span>{{totalSummary.memberCount}}</span> 位下级会员，当前团队盈亏 <span>{{totalSummary.totalTeamProfit}}</span>
      <i v-if="stationAgentType=='1'&&totalSummary.commissionLevel">，您已经达标 <span>{{totalSummary.commissionLevel}}</span></i>
      <i v-if="stationAgentType=='1'&&!totalSummary.commissionLevel">，您未达标</i>
      ，再接再厉。</p>
    <p class="declareZ" v-if="stationAgentType=='0'"><b>累计代理返点总计：<span>{{totalSummary.totalRebateAmount||'0'}}</span> 元</b>
    </p>
    <div class="lastTab clearFiex" v-if="stationAgentType=='1'">
      <div class="lastTabL ">
        <div class="lastTabTol">
          <p>
            <span>佣金记录</span>
            <span>
              <b>月份</b>
              <b>当月盈亏</b>
              <b>返佣比例</b>
              <b>佣金金额</b>
              <b>派发时间</b>
              <b>备注说明</b>
            </span>
          </p>
          <ul class="scrollBar">
            <li v-for="commissionItem in commissionRecordData.result">
              <p>
                {{commissionItem.createYear}}-{{commissionItem.createMonth<10?'0'+commissionItem.createMonth:commissionItem.createMonth}}</p>
              <p>{{commissionItem.profit}}</p>
              <p>{{commissionItem.commissionPercent}}%</p>
              <p>{{commissionItem.commissionAmount}}</p>
              <p>{{_Util.formatDateTime(commissionItem.createTime,1)}}</p>
              <p>{{commissionItem.note}}</p>
            </li>
            <!--<li v-for="commissionItem in 5">-->
              <!--<p>-->
                <!--{{commissionItem.createYear}}-{{commissionItem.createMonth<10?'0'+commissionItem.createMonth:commissionItem.createMonth}}</p>-->
              <!--<p>{{commissionItem.profit}}</p>-->
              <!--<p>{{commissionItem.commissionPercent}}%</p>-->
              <!--<p>1</p>-->
              <!--<p>{{_Util.formatDateTime(commissionItem.createTime,1)}}</p>-->
              <!--<p>{{commissionItem.note}}</p>-->
            <!--</li>-->
          </ul>
        </div>
        <div class="pageDevice distributorLi">
          <Page :total="commissionTotalPage" :pageSize='commissionPerPageNum' :current="commissionCurrentPage"
                :showTotal='true'
                @on-change="changeCommissionCurrentPage"></Page>
        </div>
      </div>
      <div class="lastTabR lastTabTol">
        <p>
          <span>佣金说明</span>
          <span>
            <b>序号</b>
            <b>级别</b>
            <b>盈亏区间</b>
            <b>佣金金额</b>
          </span>
        </p>
        <ul class="scrollBar">
          <li v-for="(levelItem,levelIndex) in commissionSettingData">
            <p>{{levelIndex*1+1}}</p>
            <p>{{levelItem.name}}</p>
            <p>{{levelItem.minMoney}}-{{levelItem.maxMoney}}</p>
            <p>{{levelItem.percent}}%</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import './statement.scss'
//  import '../profitLoss/profitLoss.scss';
  import {mapState} from 'vuex';

  export default {
    data() {
      return {
        dashix: false,
        selectFlag: true,
        userSelfId: '',//当前用户id
        stationAgentType: '0',//站点代理模式
        currentPage: 1,//账变当前页
        totalPage: 0,//账变总条数
        perPageNum: 15,//账变每页数
        reportCurrentPage: 1,//代理报表当前页数
        reportTotalPage: 0,//代理报表总条数
        reportPerPageNum: 15,//代理报表每页数
        commissionCurrentPage: 1,//佣金当前页数
        commissionTotalPage: 0,//佣金总条数
        commissionPerPageNum: 15,//佣金每页数
        commissionSettingData: [],//佣金等级说明数据
        commissionRecordData: {},//佣金列表数据
        agentReportData: {},//代理报表数据
        agentReportStatData: {},//代理报表统计数据
        agentAccountData: {},//代理会员账变数据
        totalSummary: {},//总计
        username: '',//当前用户名
        agentReportUsername: '',//代理报表-用户名
        agentUsername: '',//代理报表-查询-用户名
        agentStartTime: '',//代理开始时间
        agentEndTime: '',//代理结束时间
        startTime: '',//会员账变开始时间
        endTime: '',//会员账变结束时间
        userId: '',//用户id--下级点击
        userIdU: '',//用户id--用户名点击
        accountTypeData: [],//账变类型数据
        accountSecondTypeData: [],//账变子类型数据
        accountFirstType: '',//账变一级类型
        accountSecondType: '',//账变子级类型
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation
      })
    },
    mounted() {},
    activated() {
      this.init();
    },
    deactivated() {},
    methods: {
      init() {
        this.initData();
        this.getStationType();
        this.getAllData();
        this.getAccountType();
        if (this.userInfo.memberInfo) {
          this.username = this.userInfo.memberInfo.username || '';
          this.userSelfId = this.userInfo.memberInfo.id || '';
        }
      },
      initData() {
        this.dashix = false;
        this.agentUsername = '';//用户名
        this.agentStartTime = '';//代理开始时间
        this.agentEndTime = '';//代理结束时间
        //代理报表数据初始化
        this.userId = '';//用户id
        this.userIdU = '';//用户id--用户名点击
        this.clearAgentPage();
        //分页初始化
        this.commissionCurrentPage = 1;//佣金当前页数
        this.commissionPerPageNum = 15;//佣金每页数
        //账变信息
        this.clearAccount();
      },
      //会员账变初始化
      clearAccount() {
        this.currentPage = 1;//账变当前页
        this.perPageNum = 15;//账变每页数
        this.startTime = '';//会员账变开始时间
        this.endTime = '';//会员账变结束时间
        this.accountFirstType = '-1';
        this.accountSecondType = '-1';
      },
      //代理报表分页数据初始化
      clearAgentPage() {
        this.reportCurrentPage = 1;//代理报表当前页数
        this.reportPerPageNum = 15;//代理报表每页数
      },
      //获取站点模式
      getStationType() {
        let that = this;
        that._Util.post(that, that._Api.POST_STATION_AGENT_TYPE, {}, (data) => {
          that.stationAgentType = data;
        })
      },
      //账变类型查询
      getAccountType() {
        let that = this;
        that._Util.post(that, that._Api.POST_ACCOUNT_TYPE, {}, (data) => {
          that.accountTypeData = data || [];
        })
      },
      //获取二级账变类型数据
      getAccountSecondType(type) {
        let that = this;
        if(type=='-1'){
          that.accountSecondTypeData = [];
        }
        that.accountSecondType = '-1';
        this.accountTypeData.forEach((v, i) => {
          if (type == v.id) {
            that.accountSecondTypeData = v.subList || [];
          }
        })
      },
      //账变类型检测
      checkAccountType(type, subType, isObj) {
        let typeN = '', subTypeN = '';
        this.accountTypeData.forEach((v, i) => {
          if (type == v.id) {
            typeN = v.name;
            v.subList.forEach((v, i) => {
              if (subType == v.id) {
                subTypeN = v.name;
              }
            });
          }
        });
        if (isObj) {
          return {
            typeN,
            subTypeN
          }
        } else {
          return typeN + '-' + subTypeN;
        }

      },
      //收支判断
      checkIncomeExpenses(type, subType) {
        if ((type == 1 || type == 4 || type == 5 || type == 6) || (type == 2 && subType == 7) || (type == 3 && (subType == 3 || subType == 4))||(type==7)&&(subType==2)) {
          return 'in';
        }
        if ((type == 2 && subType != 7) || (type == 3 && (subType != 3 || subType != 4))||(type==7)&&(subType==1)) {
          return 'out';
        }
      },
      //查询代理报表
      queryAgentRport() {
        this.userId = '';
        this.userSelfId = this.userInfo.memberInfo.id || '';
        this.clearAgentPage();
        this.getAgentReportData();
      },
      //获取所有数据
      getAllData() {
        let that = this;
        that._Util.post(that, that._Api.POST_QUERY_AGENT_REPORT, {}, (data) => {
          //佣金等级说明数据
          that.commissionSettingData = data.commissionSetting || {};
          //佣金列表数据
          that.commissionRecordData = data.commissionRecord || {};
          that.commissionTotalPage = that.commissionRecordData.total || 0;
          //代理列表数据
          that.agentReportData = data.agentSummary || {};
          that.statAgentReportData(that.agentReportData.result);
          that.reportTotalPage = that.agentReportData.total || 0;
          //统计数据
          that.totalSummary = data.totalSummary || {};
        });
      },
      //获取代理报表数据
      getAgentReportData() {
        let that = this;
        let params = {
          pageSize: that.reportPerPageNum,
          pageNum: that.reportCurrentPage,
          username: that.agentUsername || '',
          startStr: that.agentStartTime || '',
          endStr: that.agentEndTime || '',
          uid: that.userId || '',
        };
        that._Util.post(that, that._Api.POST_QUERY_AGENT_SUMMARY, params, (data) => {
          that.agentReportData = data || {};
          that.statAgentReportData(that.agentReportData.result);
          that.reportTotalPage = that.agentReportData.total || 0;
        });
      },
      //统计代理报表各项数据
      statAgentReportData(data) {
        let that = this;
        let result = {};
        for (var i = 0; i < 11; i++) {
          result['data' + (i + 1)] = 0;
        }
        data.forEach((v, i) => {
          result.data1 += parseInt(v.totalSub*1000 || '0');//下级
          result.data2 += parseInt(v.totalBetAmount*1000 || '0');//有效投注
          result.data3 += parseInt(v.totalWinAmount*1000 || '0');//中奖金额
          result.data4 += parseInt(v.totalRebateAmount*1000 || '0');//彩票返水
          result.data5 += parseInt(v.totalRechargeAmount*1000 || '0');//总存款
          result.data6 += parseInt(v.totalIncomeGiftAmount*1000 || '0');//入款优惠
          result.data7 += parseInt(v.totalActiveGiftAmount*1000 || '0');//活动优惠
          result.data8 += parseInt(v.totalWithdrawAmount*1000 || '0');//总取款
          result.data9 += parseInt(v.totalActiveWithdrawAmount*1000 || '0');//优惠扣除
          result.data10 += parseInt(v.totalOtherWithdrawAmount*1000 || '0');//其他扣除
          result.data11 += parseInt(v.totalTeamProfit*1000 || '0');//团队盈亏
        })
        for (var i = 0; i < 11; i++) {
          result['data' + (i + 1)] = result['data' + (i + 1)]/1000;
        }
        that.agentReportStatData = result;
      },
      //获取佣金列表
      getCommissionRecord() {
        let that = this;
        let params = {
          pageSize: that.commissionPerPageNum,
          pageNum: that.commissionCurrentPage,
        };
        that._Util.post(that, that._Api.POST_QUERY_COMMISSION_RECORD, params, (data) => {
          that.commissionRecordData = data || {};
          that.commissionTotalPage = that.commissionRecordData.total || 0;
        });
      },
      //查询会员账变信息
      queryAccountInfo() {
        this.currentPage = 1;
        this.getMemberAccountInfo();
      },
      //获取会员账变信息
      getMemberAccountInfo() {
        let that = this;
        let params = {
          pageSize: that.perPageNum,
          pageNum: that.currentPage,
          startStr: that.startTime || '',
          endStr: that.endTime || '',
          parentId: that.userIdU || '',
          type: that.accountFirstType == '-1' ? '' : that.accountFirstType,
          subType: that.accountSecondType == '-1' ? '' : that.accountSecondType,
        };
        that._Util.post(that, that._Api.POST_MEMBER_ACCOUNT_INFO, params, (data) => {
          that.agentAccountData = data || {};
          that.totalPage = that.agentAccountData.total || 0;
        })
      },
      //查询会员下级代理报表
      querySubAgent(uid) {
        let that = this;
        that.userId = uid;
        if (that.userSelfId == that.userId) return false;
        that.userSelfId = uid;
        that.getAgentReportData();
      },
      //改变开始时间
      changeStartTime(val) {
        this.startTime = val;
      },
      //改变结束时间
      changeEndTime(val) {
        this.endTime = val;
      },
      //改变代理开始时间
      changeAgentStartTime(val) {
        this.agentStartTime = val;
      },
      //改变代理结束时间
      changeAgentEndTime(val) {
        this.agentEndTime = val;
      },
      //代理报表-用户名点击事件
      AccountChangeList(v, username) {
        if (v === 'close') {
          this.dashix = false;
          this.agentAccountData = {};
          this.clearAccount();
        } else {
          this.dashix = true;
          this.agentReportUsername = username;
          this.userIdU = v;
          this.clearAccount();
          this.getMemberAccountInfo();
        }
      },
      //改变账变页数
      changeCurrentPage(val) {
        this.currentPage = val;
        this.getMemberAccountInfo();
      },
      //改变代理报表页数
      changeReportCurrentPage(val) {
        this.reportCurrentPage = val;
        this.getAgentReportData();
      },
      //改变佣金列表页数
      changeCommissionCurrentPage(val) {
        this.commissionCurrentPage = val;
        this.getCommissionRecord();
      },
    },
    components: {},
    watch: {
      'userInfo'() {
        this.username = this.userInfo.memberInfo.username;
        this.userSelfId = this.userInfo.memberInfo.id;
      },
      'accountFirstType'(val) {
        this.getAccountSecondType(val);
      },
    }
  }
</script>
